<template>
	<view>
		<scroll-view :scroll-y="true">
			<view class="navbar">
				<navbar title="确认订单" bgColor="#000" fontColor="#fff"> </navbar>
			</view>
			<view class="table-no" v-if="order_info.table_no && order_info.table_no.length>0">
				桌台：<view class="no">{{ order_info.table_no }}</view>
			</view>
			<view v-else class="no-table-no" v-else>
				<uni-icons type="sound" size="28" color="#f9ae3d" style="height:100%;display: flex;align-items: center"></uni-icons>
				温馨提示：请适量点餐、避免浪费
			</view>
			<view class="ordering-type">
				<u-radio-group v-model="ordering_type" placement="row" :customStyle="{
                    justifyContent: 'flex-end',
                }">
					<u-radio :customStyle="{ marginLeft: '30rpx' }" v-for="(item, index) in ordering_type_list"
						:key="item.type" :label="item.name" :name="item.type" activeColor="#f9ae3d" size="42"
						labelSize="32" iconSize="24">
					</u-radio>
				</u-radio-group>
			</view>
			<view class="good-list">
				<!--正常产品数据-->
				<block v-for="(good, key) in cart_info" :key="key" v-if="key < 3 || showMore">
					<view class="border-line border-line--gray"></view>
					<view class="good-row">
						<view class="u-col-6">
							<view class="good-name">{{ good.product_name }}</view>
							<view class="good-spce" v-if="good.product_kind==1">{{ good.food_property }}</view>
							<block v-if="good.product_kind==2">
								<view class="good-spce" v-for="(combos_item,combos_item_index) in good.combos"
									:key="combos_item_index">
									-{{combos_item.product_name}}x{{combos_item.qty}}<br />
								</view>
								<view class="good-spce">
									{{good.food_property}}
								</view>
							</block>
						</view>
						<view class="u-col-2">
							<view class="good-number">x{{ good.qty }}</view>
						</view>
						<view class="u-col-4">
							<view class="good-price price">
								<view style="width:100%;text-align:right;margin-right:30rpx;">
									<text class="icon" v-if="good.tag == 4">会员价</text>
									<text class="icon" v-if="good.tag == 1">特价</text>
									￥{{ good.total}}
								</view>
							</view>
							<!--划线价-->
							<view class="gray" v-if="good.tag != 0"> ￥{{ good.current_price }} </view>

						</view>


					</view>
				</block>

				<block v-if="cart_info.length > 3 && !showMore">
					<view class="more-good" @click="moreGood">
						展开更多 <u-icon name="arrow-down" size="40"></u-icon>
					</view>
				</block>
			</view>
			<view class="price-box">
        <!--餐盒费-->
				<view class="border-line border-line--gray" v-if="order_info.box_price > 0"></view>
				<view class="lunch-box-fee" v-if="order_info.box_price > 0">
					<view class="u-col-6">
						<view class="left">餐盒费</view>
					</view>
					<view class="u-col-6">
						<view class="right price">￥{{ order_info.box_price }}</view>
					</view>
				</view>
				<!--			<view class="border-line border-line&#45;&#45;gray"></view>-->
				<!--			<view class="good-row coupon-row">-->
				<!--				<view class="u-col-6">-->
				<!--					<view v-if="fullPriceType == 1" class="good-name" style="color: #f9ae3d">-->
				<!--						满200减20-->
				<!--					</view>-->
				<!--					<block v-if="fullPriceType == 2">-->
				<!--						<view class="good-name" style="color: #f9ae3d"> 醋溜花生米 </view>-->
				<!--						<view class="good-spce">份</view>-->
				<!--					</block>-->
				<!--				</view>-->
				<!--				<view class="u-col-2">-->
				<!--					<view class="good-number">-->
				<!--						<block v-if="fullPriceType == 2">x1</block>-->
				<!--					</view>-->
				<!--				</view>-->
				<!--				<view class="u-col-4">-->
				<!--					<view class="good-price price">-->
				<!--						<view class="icon">-->
				<!--							<text v-if="fullPriceType == 1">满额减价</text>-->
				<!--							<text v-if="fullPriceType == 2">满额赠菜</text>-->
				<!--						</view>-->
				<!--						<view v-if="fullPriceType == 1"> -￥20 </view>-->
				<!--						<view v-if="fullPriceType == 2"> ￥0 </view>-->
				<!--					</view>-->
				<!--					<view class="gray" v-if="fullPriceType == 2"> ￥10 </view>-->
				<!--				</view>-->
				<!--			</view>-->
        <!--优惠券-->
				<view class="good-row coupon-row" v-if="coupons && Object.keys(coupons).length>0">
					<view class="u-col-6">
						<view class="good-coupon" style="color: #f9ae3d; font-size: 34rpx">
							<image style="height: 50rpx; width: 70rpx"
								src="https://vivipos.oss-cn-shanghai.aliyuncs.com/miniprogram/coupon_bg.png"
								mode="scaleToFill" />
							<view class="icon-text">{{ coupons.icon_text }}</view>
							<view class="title">{{ coupons.title }}</view>
						</view>
					</view>
					<view class="u-col-2">
						<view class="good-number"> </view>
					</view>
					<view class="u-col-4">
						<view class="good-price price" style="color: red">
							<view> -￥4 </view>
						</view>
					</view>
				</view>

				<view class="border-line border-line--black"></view>
				<view class="total-price">
					<view class="left u-col-4"> 总计：￥{{ order_info.total?order_info.total:0 | numFilter }} </view>
					<view class="center u-col-4">
						优惠：￥{{ order_info.discount_money?order_info.discount_money:0 | numFilter }} </view>
					<view class="right u-col-4"> 应付：￥{{ order_info.payment_amt?order_info.payment_amt:0 |  numFilter}}
					</view>
				</view>
			</view>
			<!--		<view class="border-line border-line&#45;&#45;gray"></view>-->
			<!--		<view class="coupon" @click="goCouponList">-->
			<!--			<view class="coupon-line">-->
			<!--				<image style="height: 50rpx; width: 50rpx"-->
			<!--					src="https://vivipos.oss-cn-shanghai.aliyuncs.com/miniprogram/coupon.png" mode="scaleToFill" />-->
			<!--				<text class="text">可用优惠券</text>-->
			<!--			</view>-->
			<!--&lt;!&ndash;			<view class="icon">&ndash;&gt;-->
			<!--&lt;!&ndash;				<u-icon name="arrow-right" size="40"></u-icon>&ndash;&gt;-->
			<!--&lt;!&ndash;			</view>&ndash;&gt;-->
			<!--		</view>-->
<!--			<view class="border-line border-line&#45;&#45;gray"></view>-->
			<view class="remark">
				<view class="title">
					<image style="height: 55rpx; width: 55rpx"
						src="https://vivipos.oss-cn-shanghai.aliyuncs.com/miniprogram/message_fill.png"
						mode="scaleToFill" />
					<text class="text">备注</text>
				</view>
				<view class="content">
					<u--textarea v-model="remark" placeholder="若有其他要求，请备注说明！" maxlength="30" height="100"
						placeholderStyle="margin: 10rpx" @input="inputRemark"></u--textarea>
					<!-- #ifdef MP-WEIXIN || H5 -->
					<view class="font-count">{{ remarkCount }}/30个字</view>
					<!-- #endif -->
				</view>
			</view>
			<view class="empty-box"></view>
		</scroll-view>
		<view class="cart" :style="{ backgroundColor: 'black' }">
			<view class="cartIcon"> 应付 </view>
			<view class="detail">
				<view class="price"> ￥{{ order_info.payment_amt?order_info.payment_amt:0 | numFilter }} </view>
			</view>
			<view class="btn" @click="next">
				<view class="box align-items-center">下一步</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState
	} from "vuex"; //引入mapState
	import PageApi from "@/api/page"
	export default {
		data() {
			return {
				ordering_type: '', // 默认下单类型
				ordering_type_list: [{
						type: 1,
						name: "堂食",
					},
					{
						type: 2,
						name: "外带",
					},
				],
				lunch_box_fee: 9, // 餐盒费
				remarkCount: 0, // 备注字数
				fullPriceType: 2, // 满额类型
				showMore: false, // 展开更多
			};
		},
		computed: {
			...mapState({
				cart_info: (state) => state.cart.cart_info,
				order_info: (state) => state.cart.order_info,
				coupons: (state) => state.cart.coupons,
				discount: (state) => state.cart.discount,
				is_cust_sum: (state) => state.cart.is_cust_sum,
				payment: (state) => state.cart.payment
			}),
			remark: {
				get() {
					return this.order_info.cust_note;
				},
				set(val) {
					this.order_info.cust_note = val
					this.$store.commit("cart/setOrderInfo", this.order_info)
					// this.$store.commit("ordering/set", {
					// 	remark: val,
					// });
				},
			},
		},
		methods: {
			next() {
				if (this.ordering_type != 1 && this.ordering_type != 2) {
					uni.showToast({
						icon: "none",
						duration: 3000,
						title: '未选择就餐方式，请选择',
					});
					return
				}
				// 需要选择就餐人数
				if (this.is_cust_sum) {
					uni.navigateTo({
						url: "/pages/ordering/people"
					});
					return
				}
				this.order_info.cust_note = this.remark
				// 订单保存
				PageApi.orderSave({
					order_info: this.order_info,
					cart_info: this.cart_info,
					coupons: [],
					payment: this.payment
				}).then(res => {
					if (res.code == 200) {
						this.$store.commit("cart/setOrderInfo", res.data)
						// 跳转到付款页面
						uni.navigateTo({
							url: "/pages/ordering/settlement"
						});
					}
				})
			},
			goCouponList() {
				uni.navigateTo({
					url: "/pages/coupon/coupon"
				});
			},
			moreGood() {
				this.showMore = true;
			},
			inputRemark(e) {
				this.remarkCount = e.length;
			},
			// 获取下单的数据
			orderConfirm() {
				PageApi.orderConfirm({
					"dining_style": this.ordering_type,
					"cust_note": this.order_info.cust_note
				}).then(res => {
					this.$store.commit('cart/setOrderData', res.data)
          this.ordering_type = res.data.order_info.dining_style  // 第一次的时候根据后台返回的默认点餐类型进行改变
					console.log("========>>>>>>>>>.", this.order_info)
				})
			}
		},
		filters: {
			numFilter(value) {
				// 截取当前数据到小数点后两位
				let realVal = parseFloat(value).toFixed(2);
				return realVal;
			},
		},
		onShow() {
			// if (this.$store.state.totalPrice == 0) {
			// 	uni.navigateTo({
			// 		url: "/pages/index/index"
			// 	});
			// }
			console.log(this.coupons)
			this.orderConfirm()
		},

		watch: {
			ordering_type(newVal, oldVal) {
				this.orderConfirm()
			},
			inputRemark(newVal) {
				// console.log(88888888,newVal)

			}
		}
	};
</script>
<style lang="scss">
	.good-coupon {
		height: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 0 20rpx;

		.icon-text {
			width: 100rpx;
			margin-left: -70rpx;
			text-align: center;
			color: #f9ae3d;
			font-weight: 600;
			font-size: 24rpx;
			-webkit-transform-origin-x: 0;
			/*缩小后文字居左*/
			-webkit-transform: scale(0.7);
			/*关键*/
			transform: scale(0.7);
		}

		.title {
			font-size: 30rpx;
			margin-left: -20rpx;
			text-align: right;
		}
	}

	.more-good {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 50rpx;
		font-size: 30rpx;
		color: #666;
	}

	.remark {
		margin: 0 20rpx;
		padding-top: 50rpx;
		margin-bottom: 150rpx;

		.title {
			height: 60rpx;
			line-height: 60rpx;
			display: flex;
			align-items: center;
			font-size: 34rpx;
			margin-bottom: 10rpx;

			.text {
				margin-left: 8rpx;
			}
		}

		.content {
			border: 1rpx #ccc solid;
			border-radius: 4rpx;

			.font-count {
				width: 98%;
				height: 60rpx;
				text-align: right;
				color: #ccc;
			}
		}
	}

	.coupon-row {
		height: 80rpx !important;
	}

	.coupon {
		margin: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.coupon-line {
			height: 60rpx;
			line-height: 60rpx;
			display: flex;
			align-items: center;
			font-size: 34rpx;

			.text {
				margin-left: 8rpx;
				color: #f9ae3d;
			}
		}
	}

	.table-no {
		width: 100%;
		height: 160rpx;
		background-color: #f2f2f2;
		font-size: 34rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.no {
			color: red;
			font-size: 46rpx;
		}
	}

	.no-table-no {
		width: 100%;
		display: flex;
		align-items: center;
		height: 120rpx;
		// border: solid 1px red;
		background-color: #fef2c3;
		color: #f9ae3d;
		font-weight: 400;
		line-height: 120rpx;
		padding-left: 50rpx;
	}

	.ordering-type {
		height: 140rpx;
		font-size: 34rpx !important;
		display: flex;
		align-items: center;
		margin-right: 40rpx;

		.u-radio-group {
			justify-content: flex-end;
		}
	}

	.good-row {
		min-height: 100rpx;
		margin: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.good-name {
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			font-size: 34rpx;
			margin-left: 30rpx;
		}

		.good-spce {
			color: #ccc;
			font-size: 26rpx;
			width: 100%;
			height: auto;
			margin-left: 30rpx;
		}

		.good-number {
			text-align: center;
		}

		.good-price {
			text-align: right;
			//margin-right: 30rpx;
			//display: flex;
			justify-content: end;
			align-items: center;
			font-size: 30rpx;
			padding-right: 20rpx;

			.icon {
				font-size: 24rpx;
				margin-right: 8rpx;
				color: #f9ae3d;
			}
		}

		.gray {
			text-align: right;
			margin-right: 30rpx;
			color: #ccc;
			text-decoration: line-through;
			font-size: 26rpx;
		}
	}

	.price-box {
		.lunch-box-fee {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 20rpx;
			height: 100rpx;

			.left {
				margin-left: 30rpx;
			}

			.right {
				text-align: right;
				margin-right: 30rpx;
			}
		}

		.total-price {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			margin: 20rpx;
			padding: 20rpx 0;

			.left {
				text-align: left !important;
			}

			.center {
				text-align: center !important;
				color: orange;
			}

			.right {
				text-align: right !important;
			}
		}
	}

	.empty-box {
		height: 110rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.cart {
		position: fixed;
		bottom: 0;
		height: 110rpx;
		width: 100%;
		z-index: 1000;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.cartIcon {
			float: left;
			width: 15%;
			height: 100%;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			color: #fff;
			font-size: 40rpx;
		}

		.detail {
			float: left;
			width: 55%;
			height: 100%;
			display: flex;
			align-items: center;

			.price {
				font-weight: 400;
				font-size: 34rpx;
				color: #fff;
				margin-left: 6rpx;
			}
		}

		.btn {
			float: left;
			width: 30%;
			height: 100%;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			font-weight: 400;
			font-size: 30rpx;

			.box {
				height: 100%;
				width: 100%;
				background-color: #f9ae3d;
				display: flex;
				justify-content: center;
			}
		}
	}

	.align-items-start {
		align-items: flex-start;
	}

	.align-items-end {
		align-items: flex-end;
	}

	.align-items-center {
		align-items: center;
	}

	.border-line {
		margin: 0 30rpx;
		height: 1px;
		background-size: 12px 1px;
		background-repeat: repeat-x;

		&--gray {
			background-image: linear-gradient(to right, #ccc 0%, #ccc 70%, transparent 0%);
		}

		&--black {
			background-image: linear-gradient(to right, #000 0%, #000 70%, transparent 0%);
		}
	}
</style>
